<template>
  <el-dialog
    :visible="visible"
    @update:visible="$emit('update:visible', $event)"
    :title="title"
    :width="width"
    :fullscreen="fullscreen"
    :top="top"
    :modal="modal"
    :modal-append-to-body="modalAppendToBody"
    :append-to-body="appendToBody"
    :custom-class="classes"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :destroy-on-close="destroyOnClose"
    @open="$emit('open')"
    @opened="$emit('opened')"
    @close="$emit('close')"
    @closed="$emit('closed')"
  >
    <template slot="title">
      <slot name="title"></slot>
    </template>
    <slot></slot>
    <template slot="footer">
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>
<script>
export default {
  name: 'CDialog',
  components: {},
  props: {
    visible: { type: Boolean, default: false },
    title: { type: String, default: '' },
    width: { type: String, default: '30%' },
    fullscreen: { type: Boolean, default: false },
    top: { type: String, default: '' },
    modal: { type: Boolean, default: true },
    modalAppendToBody: { type: Boolean, default: true },
    appendToBody: { type: Boolean, default: true },
    customClass: { type: String, default: '' },
    closeOnClickModal: { type: Boolean, default: false },
    closeOnPressEscape: { type: Boolean, default: false },
    destroyOnClose: { type: Boolean, default: false }
  },
  data() {
    return {}
  },
  computed: {
    classes() {
      const {
        customClass,
        $slots: { footer }
      } = this
      const classes = ['c-dialog']
      footer ? classes.push('c-dialog-hf') : classes.push('c-dialog-nf')
      customClass && classes.push(customClass)
      return classes.join(' ')
    }
  },
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {}
}
</script>
<style lang="scss">
.c-dialog {
  position: absolute;
  height: 30%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  &-hf {
    .el-dialog__body {
      height: calc(100% - 106px);
    }
  }
  &-nf {
    .el-dialog__body {
      height: calc(100% - 54px);
    }
  }
  .el-dialog__body {
    box-sizing: border-box;
    padding: 20px;
    overflow: auto;
    .c-table {
      &-header {
        background-color: #ecf6ff;
        color: #333;
      }
    }
  }
  .el-dialog__footer {
    padding: 10px;
    background: #fff;
  }
}
</style>
